<!DOCTYPE html>
<html lang="zh-CN">
    <meta charset="UTF-8">
    <title>Title</title>


<head>
</head>
<style>
    .node rect {
    cursor: move;
    fill-opacity: .9;
    shape-rendering: crispEdges;
    }

    .node text {
    pointer-events: none;
    text-shadow: 0 1px 0 #fff;
    }

    .link {
    fill: none;
    stroke: #000;
    stroke-opacity: .2;
    }

    .link:hover {
    stroke-opacity: .5;
    }

</style>

    <script src="/static/js/jquery-3.5.0.min.js"></script>
    <script src="/static/bootstrap/js/bootstrap.js"></script>
    <script src="/static/js/d3.v5.js"></script>
    <script src="/static/js/chart.js"></script>
    <script src="/static/js/newScatter.js"></script>
    <script src="/static/js/newMatrix.js"></script>
    <script src="/static/js/newSankey.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/holtzy/D3-graph-gallery@master/LIB/sankey.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

<body>


    <div  class="container-fluid" style="width: 1220px;height: 1000px;margin: 0 auto;background: #E6E6FA;">
        <div class="row" >
          <div class="col-md-1"  style="width: 1195px;height: 80px; overflow: auto ;margin-top: 5px;margin-bottom: 5px;margin-left: 15px;margin-right: 15px;background: #FFFFFF;text-align:center">
              <h1>虚分类可视化</h1>
          </div>
        </div>
        <div class="row">
          <div class="col-md-3">
             <div class="row">
                 <div calss = "col-md-3" style="width: 300px;height: 400px; background: #E6E6FA;margin-left: 5px;float:left">
                     <div class="title1" style="width: 300px;height: 20px;background: #FFFFFF;margin-left: 10px;">
                         类别基础信息
                     </div>
                     <div class="SankyDiv" style="width: 300px;height: 375px;background: #FFFFFF;margin-left: 10px;">
                     </div>

                 </div>
                  <div calss = "col-md-3" style="width: 300px;height: 195px;background: #E6E6FA;margin-left: 5px;margin-top: 5px;float:left">
                      <div class="title2" style="width: 300px;height: 20px;background: #FFFFFF;margin-top: 5px;margin-left: 10px;">
                         混淆矩阵
                      </div>
                      <div  id="matrixDiv" style="width: 300px;height: 170px;background: #FFFFFF;margin-left: 10px;">

                      </div>

                 </div>
             </div>
          </div>
            <div class="col-md-3" style="width: 600px;height: 600px;background:  #E6E6FA;float:left">
                <div class="title3" style="width: 600px;height: 20px;background: #FFFFFF;margin-bottom: 5px;">
                    投影
                </div>
                <div id="ScatterDiv" class="touying" style="width: 600px;height: 575px;background: #FFFFFF;text-align: center;">

                </div>

             </div>

            <div class="col-md-3" style="width: 300px;height: 600px; background: #E6E6FA;float:left">
                <div class="title4" style="width: 290px;height: 20px;background: #FFFFFF;margin-bottom: 5px;">
                    细节
                </div>
                <div class="xijie" style="width: 290px;height: 575px;background: #FFFFFF;">
                    细节
                </div>

            </div>
        </div>

        <div class="row">
          <div class="col-md-6" style="width: 1220px;height: 300px; background: #E6E6FA;margin-top: 5px;" >
              <div class="title5" style="width: 1195px;height: 20px;background: #FFFFFF;margin-bottom: 5px;">
                  迭代
              </div>
              <div class="diedai" style="width: 1195px;height: 275px;background: #FFFFFF;">
                  迭代
              </div>
          </div>
        </div>

    </div>
    <script>
        // const dataset = [[X1,Y1,Z1],[X2,Y2,Z2].....];//原始数据 n个*m+1维度 z就是
        // var makeLabel =[];//标签   一行就是n个 按行操作 有几行就是几次迭代次数 存1，2，3，4对应类别（对应相应的类别）
        //                 //虚类别 就是在后面在加一行(先)
        // var preLabel =[];//预测标签 与makelabel一样 相对应关系
        //                 //（后）
        // var numclass =[];//每一次对应的类别信息 例如：”A“ ”B“ ”C“ 与上面对应（行对应）
        //                 // 产生虚类别 就对应产生新的一行类别信息(后)
        // //1、数据先初始化；
        // //2、根据数据集开始画图 ;
        // //3、桑吉图的画法：来自makelabel
        // //4、混淆矩阵 numclass(矩阵个数) 和 makelabel和prelabel(来划分数据)——》dataset
        // //5、投影视图 dataset展示 makelabel和prelabel(后期安排)
        // //6、详细信息 展示：1、单独选点 2、混淆矩阵对应的点 ——》详细信息 表格来展示
        //
        // //就是展示数据 修改数据 如此往复


            var dataSet=[];
            var makelable=[];
            var prelabel=[];
            var numclass=[];
            d3.csv('/static/data/AB11.csv').then(function (data) {
                let tempmakelable=[];
                let tempprelable=[];
                data.forEach(d => {
                    d['X'] = +(d['X']);
                    d['Y'] = +(d['Y']);
                    d['label1'] = +(d['label1']);
                    d['label2'] = +(d['label2']);
                    d['label3'] = +(d['label3']);
                    dataSet.push([d['X'],d['Y'],d['label1']]);
                    makelable.push()
                    tempmakelable.push(d['label1']);
                    tempprelable.push(d['label2']);
                });
                makelable.push(tempmakelable);
                prelabel.push(tempprelable);
                numclass.push([...new Set(tempmakelable)]);
                drawNewScatter();
                drawNewmatrix(dataSet);
            });

    </script>

</body>
</html>
